<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input v-model="crud.queryInput.value" clearable placeholder="输入搜索内容" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <el-select v-model="crud.queryInput.type" clearable placeholder="类型" class="filter-item" style="width: 130px">
          <el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
        </el-select>
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation ref="crudOperation" :permission="permission" />
      <!--表单组件-->
      <el-dialog class="form-dialog" :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" top="5vh" width="90%" @open="onDialogOpen()">
        <el-form ref="form" class="form" :model="form" :rules="rules" size="small" label-width="150px">
          <el-form-item label="项目类型" prop="projectType">
            <!-- <el-input v-model="form.projectType" style="width: 300px;" /> -->
            <el-select v-model="form.projectType" filterable placeholder="请选择">
              <el-option
                v-for="item in dict.project_type"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="项目名称" prop="projectName">
            <el-input v-model="form.projectName" style="width: 185px;" />
          </el-form-item>
          <el-form-item label="主管部门" prop="departmentId">
            <!-- 选择组件 -->
            <department-select v-model="form.departmentId" />
          </el-form-item>
          <el-form-item label="主管中心" prop="centerId">
            <!-- 选择组件 -->
            <center-select :value="[form.centerBase.departmentId.id,form.centerId]" @input="centerSelectInput" />
          </el-form-item>
          <el-form-item label="主管部门领导" prop="departmentLeaderId">
            <!-- 选择组件 -->
            <person-select ref="personSelect1" :value="[form.departmentLeaderBase.centerBase.departmentId.id,form.departmentLeaderBase.centerBase.id,form.departmentLeaderId]" @input="personSelectInput" />
          </el-form-item>
          <el-form-item label="主管所领导" prop="instituteLeaderId">
            <!-- 选择组件 -->
            <person-select ref="personSelect2" :value="[form.instituteLeaderBase.centerBase.departmentId.id,form.instituteLeaderBase.centerBase.id,form.instituteLeaderId]" @input="personSelectInput2" />
          </el-form-item>
          <el-form-item label="项目编号/核算码">
            <el-input v-model="form.projectNo" style="width: 300px;" />
          </el-form-item>
          <el-form-item label="密级">
            <!-- 手动设置 Select -->
            <el-radio-group v-model="form.secretLevel" style="width: 300px">
              <el-radio label="非密">非密</el-radio>
              <el-radio label="秘密">秘密</el-radio>
              <el-radio label="机密">机密</el-radio>
              <el-radio label="绝密">绝密</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="重要程度">
            <el-input v-model="form.importance" style="width: 300px;" />
          </el-form-item>
          <el-form-item label="总体单位">
            <el-input v-model="form.mainCompany" style="width: 300px;" />
          </el-form-item>
          <el-form-item label="研制内容">
            <el-input v-model="form.developmentContents" :rows="3" type="textarea" style="width: 750px;" />
          </el-form-item>
          <el-form-item label="项目工作文档位置">
            <el-input v-model="form.docPath" style="width: 300px;" />
          </el-form-item>
          <el-form-item label="项目代码位置">
            <el-input v-model="form.codePath" style="width: 300px;" />
          </el-form-item>
          <el-form-item label="项目开始时间">
            <el-date-picker v-model="form.startTime" type="datetime" style="width: 300px;" />
          </el-form-item>
          <el-form-item label="项目结束时间">
            <el-date-picker v-model="form.endTime" type="datetime" style="width: 300px;" />
          </el-form-item>
          <el-form-item label="项目所属计划类型">
            <!-- <el-input v-model="form.projectPlanType" style="width: 300px;" /> -->
            <el-radio-group v-model="form.projectPlanType">
              <el-radio label="计划内" style="width: 178px">计划内</el-radio>
              <el-radio label="计划外" style="width: 178px">计划外</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="主要完成形式/成果">
            <el-input v-model="form.achievement" :rows="3" type="textarea" style="width: 750px;" />
          </el-form-item>
          <el-form-item label="计划开始时间">
            <el-date-picker v-model="form.planStartTime" type="datetime" style="width: 300px;" />
          </el-form-item>
          <el-form-item label="计划完成时间">
            <el-date-picker v-model="form.planFinishTime" type="datetime" style="width: 300px;" />
          </el-form-item>
          <el-form-item label="计划依据">
            <el-input v-model="form.planBasis" :rows="3" type="textarea" style="width: 750px;" />
          </el-form-item>
          <el-form-item label="项目状态">
            <el-radio-group v-model="form.projectState">
              <el-radio label="已完成" style="width: 178px">已完成</el-radio>
              <el-radio label="未完成" style="width: 178px">未完成</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <!-- 展开行 -->
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="项目工作文档位置">
                <span>{{ scope.row.docPath }}</span>
              </el-form-item>
              <el-form-item label="项目代码位置">
                <span>{{ scope.row.codePath }}</span>
              </el-form-item>
              <el-form-item label="项目开始时间">
                <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span>
              </el-form-item>
              <el-form-item label="项目结束时间">
                <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span>
              </el-form-item>
              <br>
              <el-form-item label="主要完成形式/成果">
                <span>{{ scope.row.achievement }}</span>
              </el-form-item>
              <el-form-item label="计划开始时间">
                <span>{{ parseTime(scope.row.planStartTime, '{y}-{m}-{d}') }}</span>
              </el-form-item>
              <el-form-item label="计划完成时间">
                <span>{{ parseTime(scope.row.planFinishTime, '{y}-{m}-{d}') }}</span>
              </el-form-item>
              <el-form-item label="计划依据">
                <span>{{ scope.row.planBasis }}</span>
              </el-form-item>
              <br>
              <el-form-item label="">
                <router-link :to="{ path: '/pm/pm/project_staff', query: { mode: 'ONE',projectId: scope.row.id }}">
                  <el-tag>
                    项目人员
                  </el-tag>
                </router-link>
              </el-form-item>
              <el-form-item label="">
                <router-link :to="{ path: '/pm/pm/projectStage', query: { mode: 'ONE',projectId: scope.row.id }}">
                  <el-tag>
                    项目阶段管理
                  </el-tag>
                </router-link>
              </el-form-item>
              <el-form-item label="">
                <router-link :to="{ path: '/pm/pm/projectStageProgress', query: { mode: 'ONE',projectId: scope.row.id }}">
                  <el-tag>
                    项目阶段周报
                  </el-tag>
                </router-link>
              </el-form-item>
              <el-form-item label="">
                <router-link :to="{ path: '/pm/pm/projectAllTaskView', query: { mode: 'ONE',projectId: scope.row.id }}">
                  <el-tag>
                    任务人员分配
                  </el-tag>
                </router-link>
              </el-form-item>
              <el-form-item label="">
                <router-link :to="{ path: '/pm/pm/projectTask', query: { mode: 'ONE',projectId: scope.row.id }}">
                  <el-tag>
                    项目任务清单
                  </el-tag>
                </router-link>
              </el-form-item>
              <el-form-item label="">
                <router-link :to="{ path: '/pm/pm/projectIssue', query: { mode: 'ONE',projectId: scope.row.id }}">
                  <el-tag>
                    项目问题清单
                  </el-tag>
                </router-link>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <!-- -->
        <el-table-column type="selection" width="55" />
        <el-table-column v-if="columns.visible('id')" prop="id" label="id" />
        <el-table-column v-if="columns.visible('projectType')" prop="projectType" label="项目类型" />
        <el-table-column v-if="columns.visible('projectName')" prop="projectName" label="项目名称" />
        <!-- 注意，projectPlan这一列并无对应的数据 -->
        <!-- 去除项目计划 -->
        <!-- <el-table-column v-if="columns.visible('projectPlan')" prop="projectPlan" label="项目计划">
          <template slot-scope="scope">
            <router-link :to="{ path: '/pm/pm/project_plan', query: { mode: 'ONE',projectId: scope.row.id }}">
              <el-tag>
                详情
              </el-tag>
            </router-link>
          </template>
        </el-table-column> -->
        <el-table-column v-if="columns.visible('departmentId')" prop="departmentId" label="主管部门">
          <template slot-scope="scope">
            <router-link :to="{ path: '/pm/pm/project_department', query: { mode: 'ONE',projectId: scope.row.id }}">
              <el-tag>
                {{ scope.row.departmentBase.departmentName }}
              </el-tag>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('centerId')" prop="centerId" label="主管中心">
          <template slot-scope="scope">
            <router-link :to="{ path: '/pm/pm/project_center', query: { mode: 'ONE',projectId: scope.row.id }}">
              <el-tag>
                {{ scope.row.centerBase.centerName }}
              </el-tag>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('departmentLeaderId')" prop="departmentLeaderId" label="主管部门领导" width="100px">
          <template slot-scope="scope">
            <router-link :to="{ path: '/hr/hr/employee_base_one', query: { id: scope.row.departmentLeaderId }}">
              <el-tag>
                {{ scope.row.departmentLeaderBase.empName }}
              </el-tag>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('instituteLeaderId')" prop="instituteLeaderId" label="主管所领导" width="80px">
          <template slot-scope="scope">
            <router-link :to="{ path: '/hr/hr/employee_base_one', query: { id: scope.row.instituteLeaderId }}">
              <el-tag>
                {{ scope.row.instituteLeaderBase.empName }}
              </el-tag>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('projectNo')" prop="projectNo" label="项目编号/核算码" />
        <el-table-column v-if="columns.visible('secretLevel')" prop="secretLevel" label="密级" />
        <el-table-column v-if="columns.visible('importance')" prop="importance" label="重要程度" />
        <el-table-column v-if="columns.visible('mainCompany')" prop="mainCompany" label="总体单位" />
        <el-table-column v-if="columns.visible('developmentContents')" prop="developmentContents" label="研制内容" />
        <el-table-column v-if="columns.visible('docPath')" prop="docPath" label="项目工作文档位置" />
        <el-table-column v-if="columns.visible('codePath')" prop="codePath" label="项目代码位置" />
        <el-table-column v-if="columns.visible('startTime')" prop="startTime" label="项目开始时间" width="100px">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('endTime')" prop="endTime" label="项目结束时间" width="100px">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('projectPlanType')" prop="projectPlanType" label="项目所属计划类型" />
        <el-table-column v-if="columns.visible('achievement')" prop="achievement" label="主要完成形式/成果" />
        <el-table-column v-if="columns.visible('planStartTime')" prop="planStartTime" label="计划开始时间" width="100px">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.planStartTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('planFinishTime')" prop="planFinishTime" label="计划完成时间" width="100px">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.planFinishTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('planBasis')" prop="planBasis" label="计划依据" />
        <el-table-column v-if="columns.visible('projectState')" prop="projectState" label="项目状态" />
        <el-table-column v-permission="['admin','projectBase:edit','projectBase:del']" fixed="right" label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <udOperation
              ref="udOperation"
              :data="scope.row"
              :permission="permission"
            />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudProjectBase from '@/api/projectBase'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import departmentSelect from '@/views/components/cascader/department_cascader'
import centerSelect from '@/views/components/cascader/center_cascader'
import personSelect from '@/views/components/cascader/person_cascader'

// crud交由presenter持有
const defaultCrud = CRUD({ title: '项目基础信息', url: 'api/projectBase', sort: 'id,desc', crudMethod: { ...crudProjectBase }})
const defaultForm = {
  id: null,
  projectType: null,
  projectName: null,
  departmentId: null,
  centerId: null,
  centerBase: { departmentId: { id: null }},
  departmentLeaderId: null,
  departmentLeaderBase: { centerBase: { id: null, departmentId: { id: null }}},
  instituteLeaderId: null,
  instituteLeaderBase: { centerBase: { id: null, departmentId: { id: null }}},
  projectNo: null,
  secretLevel: null,
  importance: null,
  mainCompany: null,
  developmentContents: null,
  docPath: null,
  codePath: null,
  startTime: null,
  endTime: null,
  projectPlanType: null,
  achievement: null,
  planStartTime: null,
  planFinishTime: null,
  planBasis: null,
  projectState: null
}
export default {
  name: 'ProjectBase',
  components: { pagination, crudOperation, rrOperation, udOperation, departmentSelect, centerSelect, personSelect },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  dicts: ['project_type'],
  data() {
    return {
      permission: {
        add: ['admin', 'projectBase:add'],
        edit: ['admin', 'projectBase:edit'],
        del: ['admin', 'projectBase:del']
      },
      rules: {
        projectType: [
          { required: true, message: '必须填写该项', trigger: 'blur' }
        ],
        projectName: [
          { required: true, message: '必须填写该项', trigger: 'blur' }
        ],
        departmentId: [
          { required: true, message: '必须填写该项', trigger: 'blur' }
        ],
        centerId: [
          { required: true, message: '必须填写该项', trigger: 'blur' }
        ],
        departmentLeaderId: [
          { required: true, message: '必须填写该项', trigger: 'blur' }
        ],
        instituteLeaderId: [
          { required: true, message: '必须填写该项', trigger: 'blur' }
        ]
      },
      queryTypeOptions: [
        { key: 'id', display_name: '项目ID' },
        { key: 'projectType', display_name: '项目类型' },
        { key: 'projectName', display_name: '项目名称' },
        { key: 'departmentId', display_name: '主管部门ID' },
        { key: 'departmentName', display_name: '主管部门' },
        { key: 'centerId', display_name: '主管中心ID' },
        { key: 'centerName', display_name: '主管中心' },
        { key: 'departmentLeaderId', display_name: '主管部门领导ID' },
        { key: 'departmentLeaderName', display_name: '主管部门领导' },
        { key: 'instituteLeaderId', display_name: '主管所领导ID' },
        { key: 'instituteLeaderName', display_name: '主管所领导' },
        { key: 'projectNo', display_name: '项目编号/核算码' },
        { key: 'secretLevel', display_name: '密级' },
        { key: 'importance', display_name: '重要程度' },
        { key: 'mainCompany', display_name: '总体单位' },
        { key: 'developmentContents', display_name: '研制内容' },
        { key: 'projectPlanType', display_name: '项目所属计划类型' },
        { key: 'achievement', display_name: '主要完成形式/成果' },
        { key: 'planBasis', display_name: '计划依据' },
        { key: 'projectState', display_name: '项目状态' }
      ]
    }
  },
  created() {
  },
  mounted() {
    // 默认隐藏
    this.crud.props.tableColumns.docPath.visible = false
    this.crud.props.tableColumns.codePath.visible = false
    this.crud.props.tableColumns.startTime.visible = false
    this.crud.props.tableColumns.endTime.visible = false

    this.crud.props.tableColumns.achievement.visible = false
    this.crud.props.tableColumns.planStartTime.visible = false
    this.crud.props.tableColumns.planFinishTime.visible = false
    this.crud.props.tableColumns.planBasis.visible = false
  },
  methods: {
    // 获取数据前设置好接口地址
    [CRUD.HOOK.beforeRefresh]() {
      // 原始代码
      // const query = this.query
      // if (query.type && query.value) {
      //   this.crud.params[query.type] = query.value
      // }
      // console.log(this.crud)
      // 叠加queryInput中的搜索条件
      if (this.crud.queryInput.type && this.crud.queryInput.value) {
        this.crud.query[this.queryInput.type] = this.queryInput.value
      }
      // 应用默认搜索条件
      // this.crud.query['id'] = 1
      return true
    },
    // showEmployeeBase(e) {
    //   console.log(e)
    //   this.$alert(e, '人员详e细信息', {
    //     confirmButtonText: '确定',
    //     callback: action => {
    //       // this.$message({
    //       //   type: 'info',
    //       //   message: `action: ${ action }`
    //       // })
    //     }
    //   })
    // },
    onDialogOpen() {
      // console.log(this.form)
    },
    centerSelectInput(e) {
      // console.log(e)
      // form.centerId = $event.target.value
      this.form.centerBase.departmentId.id = e[0]
      this.form.centerId = e[1]
    },
    personSelectInput(e) {
      // console.log(this.form)
      this.form.departmentLeaderId = e[2]
      this.form.departmentLeaderBase.centerBase.id = e[1]
      this.form.departmentLeaderBase.centerBase.departmentId.id = e[0]
    },
    personSelectInput2(e) {
      // console.log(this.form)
      this.form.instituteLeaderId = e[2]
      this.form.instituteLeaderBase.centerBase.id = e[1]
      this.form.instituteLeaderBase.centerBase.departmentId.id = e[0]
    },
    // [CRUD.HOOK.beforeSubmit]() 和 beforeCrudSubmitCU()都可以
    // [CRUD.HOOK.beforeSubmit]() {
    //   console.log('1')
    //   console.log('beforeCrudSubmitCU')
    //   return true
    // },
    beforeCrudSubmitCU() {
      // console.log('beforeCrudSubmitCU')
      // 提交前处理this.crud.form数据
      const f = JSON.parse(JSON.stringify(this.form))
      f.centerBase = null
      f.departmentLeaderBase = null
      f.instituteLeaderBase = null
      this.crud.form = f
    },
    afterCrudSubmitCU() {
      // console.log('afterCrudSubmitCU')
      // 提交后还原
      this.crud.form = this.form
    }
  }
}
</script>

<style scoped>
.form-dialog .form {
  /* border: solid 1px red; */
  height: calc(90vh - 180px);
  overflow: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* justify-content: flex-start | flex-end | center | space-between | space-around; */
  justify-content: flex-start;
}
</style>
<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  /* width: 160px; */
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 20px;
  margin-bottom: 20px;
  /* width: 30%; */
}
</style>
